<template>
  <div>
    <div style="border: 1px solid #538ea4">
      <span class="div_span">服务器状态</span>
      <el-row :gutter="5" class="system_state">
        <el-col :span="5">
          <el-card v-if="state.os" class="card_item">
            <template #header>
              <div>操作系统</div>
            </template>
            <div style="margin-top: -20px">
              <el-row v-for="(v, k) in state.os" :key="k" :gutter="5" style="height: 30px">
                <el-col :span="12">{{ k }}:</el-col>
                <el-col :span="12" v-text="v"/>
              </el-row>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card
              v-if="state.cpu"
              class="card_item"
              :body-style="{ height: '180px', 'overflow-y': 'scroll' }"
          >
            <template #header>
              <div>处理器</div>
            </template>
            <div style="margin-top: -20px">
              <el-row :gutter="10">
                <el-col :span="12">physical number of cores:</el-col>
                <el-col :span="12" v-text="state.cpu.cores"/>
              </el-row>
              <el-row v-for="(item, index) in state.cpu.cpus" :key="index" :gutter="10" style="height: 30px">
                <el-col :span="12">core {{ index }}:</el-col>
                <el-col
                    :span="12"
                >
                  <el-progress
                      type="line"
                      :percentage="+item.toFixed(0)"
                      :color="colors"
                  />
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card v-if="state.disk" class="card_item">
            <template #header>
              <div>硬盘</div>
            </template>
            <div style="margin-top: -30px">
              <el-row :gutter="10">
                <el-col :span="14">
                  <el-row v-for="(v, k) in state.disk" :key="k" :gutter="70" style="height: 30px">
                    <el-col v-if="k !== 'usedPercent'" :span="12">{{ k }}(GB)</el-col>
                    <el-col v-else :span="12">{{ k }}(%s)</el-col>
                    <el-col :span="12" v-text="v"/>
                  </el-row>
                </el-col>
                <el-col :span="10">
                  <el-progress
                      type="dashboard"
                      :percentage="state.disk.usedPercent"
                      :color="colors"
                  />
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>

        <el-col :span="7">
          <el-card v-if="state.ram" class="card_item">
            <template #header>
              <div>内存</div>
            </template>
            <div style="margin-top: -30px">
              <el-row :gutter="10">
                <el-col :span="16">
                  <el-row v-for="(v, k) in state.ram" :key="k" :gutter="10" style="height: 30px">
                    <el-col v-if="k !== 'usedPercent'" :span="12">{{ k }}(GB)</el-col>
                    <el-col v-else :span="12">{{ k }}(%s)</el-col>
                    <el-col :span="12" v-text="v"/>
                  </el-row>
                </el-col>
                <el-col :span="8">
                  <el-progress
                      type="dashboard"
                      :percentage="state.ram.usedPercent"
                      :color="colors"
                  />
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div style="border: 1px solid #538ea4;margin-top: 10px">
      <span class="div_span" style="width: 120px;">外部数据库状态</span>
      <el-row v-for="item in dbState" :key="item.id" :gutter="5" class="system_state">
        <el-col :span="5">
          <el-card class="card_item">
            <template #header>
              <div>{{ item.dbName }} ({{ item.dbType }}--{{ item.dbTopic }})</div>
            </template>
            <div>示例</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div style="border: 1px solid #538ea4;margin-top: 10px">
      <span class="div_span" style="width: 70px">数仓状态</span>
      <el-row :gutter="5" class="system_state">
        <el-col :span="6">
          <el-card class="card_item">
            <template #header>
              <div>SysDb(系统数据库)</div>
            </template>
            <div>示例</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="card_item">
            <template #header>
              <div>OdsDb(数仓数据库)</div>
            </template>
            <div>示例</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="card_item">
            <template #header>
              <div>UdsDb(自定义数据库)</div>
            </template>
            <div>示例</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="card_item">
            <template #header>
              <div>Kafka(系统Kafka)</div>
            </template>
            <div>示例</div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="5" class="system_state">
        <el-col :span="6">
          <el-card class="card_item">
            <template #header>
              <div>ETCD(系统ETCD)</div>
            </template>
            <div>示例</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="card_item">
            <template #header>
              <div>REDIS(系统REDIS)</div>
            </template>
            <div>示例</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="card_item">
            <template #header>
              <div>CACHE(系统缓存)</div>
            </template>
            <div>示例</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div style="border: 1px solid #538ea4;margin-top: 10px">
      <span class="div_span" style="width: 70px">数仓统计</span>
      <el-row :gutter="5" class="system_state">
        <el-col :span="6">
          <el-card class="card_item">
            <template #header>
              <div>ODS(数据汇聚统计)</div>
            </template>
            <div>示例</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="card_item">
            <template #header>
              <div>DWS(数据服务统计)</div>
            </template>
            <div>示例</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="card_item">
            <template #header>
              <div>DWD(数据质量统计)</div>
            </template>
            <div>示例</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="card_item">
            <template #header>
              <div>Meta(元数据统计)</div>
            </template>
            <div>示例</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import {getSystemState} from '@/api/system'
import {onUnmounted, ref} from 'vue'
import {getAllOdsOdb} from '@/api/odsOdb'
import {ElMessage} from 'element-plus'

const timer = ref(null)
const state = ref({})
const dbState = ref([])
const colors = ref([
  {color: '#5cb87a', percentage: 20},
  {color: '#e6a23c', percentage: 40},
  {color: '#f56c6c', percentage: 80}
])

const reload = async () => {
  const {data} = await getSystemState()
  state.value = data.server
}

const getDbState = async () => {
  const res = await getAllOdsOdb()
  if (res.code === 0) {
    dbState.value = res.data.odsOdb
  } else {
    ElMessage({
      type: 'error',
      message: '获取数据库状态信息失败'
    })
  }
}

reload()
getDbState()

timer.value = setInterval(() => {
  reload()
  getDbState()
}, 1000 * 10)

onUnmounted(() => {
  clearInterval(timer.value)
  timer.value = null
})

</script>

<script>
export default {
  name: 'State',
}
</script>

<style>
.system_state {
  padding: 10px;
}

.card_item {
  margin-top: -7px;
  height: 200px;
}
</style>
